<template>
  <div class="scr">
    <el-form-item :label="item.label + '：'" :prop="item.prop">
      <img v-if="value && item.type == 'img'" class="avatar" :src="value" />
      <MarkDown v-else-if="item.type == 'markdown'" :value="value"></MarkDown>
      <span v-else-if="item.dicData && item.dicData.length>0 && value">{{ value | dicStatus(item.dicData) }}</span>
      <span v-else>{{ value }}</span>
    </el-form-item>
  </div>
</template>

<script>
import MarkDown from '@/components/MarkDown'
export default {
  name: "vae-form",
  components: {MarkDown},
  props: {
    item: {
      type: Object,
      required: true,
    },
    value: {
      required: true,
    },
  },  
  data() {
    return {};
  },
  methods: {},
  filters: {
     dicStatus(key,data) {
       console.log(key)
      return data.filter(item=>item.key ==key)[0].value
    },
  }
};
</script>

<style lang="scss" scoped>
.avatar {
  width: 80px;
  height: 80px;
  object-fit: cover;
}
.scr {
  overflow: auto;
}
</style>